<?php
session_start();
ini_set('display_errors', 1);
error_reporting(E_ALL);

// 引入安全模块
require_once 'register_security.php';

// 定义错误提示数组
$errors = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取用户提交的信息
    $username = trim($_POST['username'] ?? '');
    $username = sanitizeUsername($username); // 应用安全过滤
    $password = $_POST['password'] ?? '';
    $confirm_password = $_POST['confirm_password'] ?? '';
    $captcha_response = $_POST['captcha_response'] ?? '';
    
     $isValidUsername = preg_match('/^[\p{N}_]+$/', $username) || 
                       preg_match('/^[\p{L}\p{N}_]+$/u', $username);
    if (!$isValidUsername) {
        $errors[] = "用户名包含非法字符，请重新输入";
    }
    
    if ($raw_username !== $username && !$isValidUsername) {
        $errors[] = "用户名包含非法字符，请重新输入";
    }
    
    // 验证必填字段

    // 验证必填字段
    if (empty($username)) {
        $errors[] = "昵称不能为空！";
    }
    if (empty($password)) {
        $errors[] = "密码不能为空！";
    }
    if ($password !== $confirm_password) {
        $errors[] = "两次输入的密码不一致";
    }
    
    // 用户名验证
    $validationError = validateUsername($username);
    if ($validationError) {
        $errors[] = $validationError;
    }
    
    // 验证密码强度（至少6位）
    if (strlen($password) < 6) {
        $errors[] = "密码长度至少需要6位";
    }
    
    // 验证验证码
    if (empty($captcha_response)) {
        $errors[] = "请完成人机验证！";
    } elseif ((int)$captcha_response !== $_SESSION['captcha_code']) {
        $errors[] = "验证码错误，请重新输入！";
    }

    // 验证用户名是否已存在
    if (is_dir("user/$username")) {
        $errors[] = "该昵称已被注册，请选择其他昵称。";
    }

    // 如果有错误提示，保存到session
    if (!empty($errors)) {
        $_SESSION['register_errors'] = $errors;
        header("Location: register.php");
        exit;
    }

    // 处理头像上传
    $avatar_path = "";
    if (isset($_FILES['avatar']) && $_FILES['avatar']['error'] === UPLOAD_ERR_OK) {
        $user_dir = "user/$username";
        if (!is_dir($user_dir)) {
            if (!mkdir($user_dir, 0755, true) && !is_dir($user_dir)) {
                $errors[] = "无法创建用户目录";
            }
        }
        $safe_filename = preg_replace("/[^a-z0-9\.]/", "", strtolower($_FILES['avatar']['name']));
        $avatar_path = "$user_dir/" . uniqid() . '_' . $safe_filename;
        if (!move_uploaded_file($_FILES['avatar']['tmp_name'], $avatar_path)) {
            $errors[] = "头像上传失败";
        }
    }

    // 保存用户信息
    $user_data = [
        'username' => $username,
        'password' => password_hash($password, PASSWORD_DEFAULT),
        'avatar' => $avatar_path,
        'gender' => "未填写",
        'birthplace' => "未填写",
        'school' => "未填写",
        'current_residence' => "未填写",
        'zodiac_sign' => "未填写",
        'birthday' => "未填写",
    ];
    
    $user_info_file = "user/$username/info.json";
    if (file_put_contents($user_info_file, json_encode($user_data)) === false) {
        $errors[] = "无法保存用户信息";
    }

    // 更新全局用户文件
    $users_file = "users.json";
    $users_list = file_exists($users_file) ? json_decode(file_get_contents($users_file), true) : [];
    $users_list[] = [
        'username' => $username,
        'directory' => "user/$username"
    ];
    file_put_contents($users_file, json_encode($users_list));

    // 注册成功后显示加载动画
    $_SESSION['register_success'] = true;
    header("Location: register.php");
    exit;
}

// 检查是否有错误需要显示
$errors = $_SESSION['register_errors'] ?? [];
unset($_SESSION['register_errors']);

// 检查是否显示成功加载动画
$show_loading = $_SESSION['register_success'] ?? false;
unset($_SESSION['register_success']);

// 生成乘法验证码
$captcha_a = rand(2, 9);
$captcha_b = rand(2, 9);
$_SESSION['captcha_code'] = $captcha_a * $captcha_b;

?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - JIILCHAT</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <meta name="description" content="JIILchat,全新的即时聊天系统">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .register-container {
            width: 100%;
            max-width: 500px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            transform: translateY(20px);
            opacity: 0;
        }
        
        @keyframes fadeInUp {
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        .register-header {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            text-align: center;
            padding: 35px 20px;
            position: relative;
            overflow: hidden;
        }
        
        .register-header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
            transform: rotate(30deg);
            animation: shine 5s infinite linear;
        }
        
        @keyframes shine {
            0% { transform: rotate(30deg) translate(-10%, -10%); }
            100% { transform: rotate(30deg) translate(10%, 10%); }
        }
        
        .app-name {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 8px;
            position: relative;
            z-index: 2;
            animation: textGlow 2s infinite alternate;
        }
        
        @keyframes textGlow {
            0% { text-shadow: 0 0 5px rgba(255,255,255,0.5); }
            100% { text-shadow: 0 0 20px rgba(255,255,255,0.8); }
        }
        
        .app-desc {
            font-size: 18px;
            opacity: 0.9;
            position: relative;
            z-index: 2;
        }
        
        .register-form {
            padding: 30px;
        }
        
        .form-group {
            margin-bottom: 25px;
            position: relative;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInForm 0.6s forwards;
        }
        
        @keyframes fadeInForm {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .form-group:nth-child(1) { animation-delay: 0.2s; }
        .form-group:nth-child(2) { animation-delay: 0.3s; }
        .form-group:nth-child(3) { animation-delay: 0.4s; }
        .form-group:nth-child(4) { animation-delay: 0.5s; }
        .form-group:nth-child(5) { animation-delay: 0.6s; }
        .form-group:nth-child(6) { animation-delay: 0.7s; }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #2d3748;
        }
        
        .form-control {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s;
            background: #f8fafc;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .form-control:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            transform: translateY(-2px);
        }
        
        .password-container {
            position: relative;
        }
        
        .toggle-password {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #718096;
            transition: transform 0.3s;
        }
        
        .toggle-password:hover {
            transform: translateY(-50%) scale(1.2);
        }
        
        .strength-meter {
            height: 4px;
            background: #e2e8f0;
            border-radius: 2px;
            margin-top: 8px;
            overflow: hidden;
            transition: all 0.4s;
        }
        
        .strength-level {
            height: 100%;
            width: 0%;
            transition: width 0.5s, background 0.5s;
        }
        
        .error-message {
            color: #e53e3e;
            font-size: 14px;
            margin-top: 5px;
            display: none;
            animation: shake 0.5s;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }
        
        .register-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .register-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
        }
        
        .register-btn:active {
            transform: translateY(0);
        }
        
        .register-btn:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255,255,255,0.3);
            border-radius: 100%;
            transform: translate(-50%, -50%);
            opacity: 0;
        }
        
        .register-btn:active:after {
            width: 300px;
            height: 300px;
            opacity: 1;
            transition: width 0.5s ease, height 0.5s ease;
        }
        
        .links-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #f0f4f8;
        }
        
        .footer-link {
            color: #3498db;
            text-decoration: none;
            font-weight: 500;
            margin: 0 15px;
            transition: all 0.3s;
            position: relative;
        }
        
        .footer-link:hover {
            text-decoration: underline;
            transform: translateY(-2px);
        }
        
        /* 验证码样式 */
        .captcha-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .captcha-box {
            background: #f0f4f8;
            border-radius: 8px;
            padding: 12px 15px;
            font-weight: 700;
            font-size: 20px;
            letter-spacing: 3px;
            color: #2c3e50;
            border: 1px solid #e2e8f0;
            flex: 1;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .captcha-box:hover {
            background: #e6f0fa;
            transform: translateY(-2px);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .captcha-input {
            flex: 1;
        }
        
        /* 通知弹窗 */
        .notification-container {
            position: fixed;
            top: 20px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            z-index: 1000;
            pointer-events: none;
        }
        
        .notification {
            background: #ff6b6b;
            color: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
            font-size: 16px;
            font-weight: 500;
            max-width: 90%;
            opacity: 0;
            transform: translateY(-50px);
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .notification.success {
            background: #2ecc71;
        }
        
        .notification.warning {
            background: #f39c12;
        }
        
        .notification.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        .notification i {
            font-size: 20px;
        }
        
        /* 加载弹窗 */
        #loading-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.95);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            flex-direction: column;
            opacity: 0;
            transition: opacity 0.5s;
        }
        
        #loading-modal.active {
            display: flex;
            opacity: 1;
        }
        
        .spinner {
            width: 70px;
            height: 70px;
            border: 6px solid rgba(52, 152, 219, 0.2);
            border-top: 6px solid #3498db;
            border-radius: 50%;
            animation: spin 1.5s linear infinite;
            margin-bottom: 25px;
        }
        
        .loading-text {
            font-size: 24px;
            font-weight: 600;
            color: #2d3748;
            animation: pulse 2s infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes pulse {
            0% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.05); }
            100% { opacity: 0.5; transform: scale(1); }
        }
        
        /* 头像动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .register-container {
                max-width: 100%;
            }
            
            .register-header {
                padding: 25px 15px;
            }
            
            .app-name {
                font-size: 30px;
            }
            
            .register-form {
                padding: 20px;
            }
        }
        
        @media (max-width: 480px) {
            .form-control {
                padding: 12px 14px;
            }
            
            .captcha-container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 通知容器 -->
    <div class="notification-container" id="notification-container"></div>
    
    <!-- 注册容器 -->
    <div class="register-container">
        <!-- 头部区域 -->
        <div class="register-header">
            <div class="app-name">JIIL微聊</div>
            <div class="app-desc">创建您的账号</div>
        </div>
        
        <!-- 注册表单 -->
        <div class="register-form">
            <form id="registration-form" method="POST" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="form-label" for="username">昵称</label>
                    <input type="text" id="username" name="username" class="form-control" 
                           placeholder="请输入昵称" required>
                    <div class="error-message" id="username-error"></div>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="password">密码</label>
                    <div class="password-container">
                        <input type="password" id="password" name="password" class="form-control" 
                               placeholder="至少6位字符" required minlength="6">
                        <span class="toggle-password" onclick="togglePasswordVisibility()">
                            <i class="fas fa-eye"></i>
                        </span>
                    </div>
                    <div class="strength-meter">
                        <div class="strength-level" id="strength-level"></div>
                    </div>
                    <div class="error-message" id="password-error"></div>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="confirm_password">确认密码</label>
                    <div class="password-container">
                        <input type="password" id="confirm_password" name="confirm_password" 
                               class="form-control" placeholder="请再次输入密码" required>
                        <span class="toggle-password" onclick="toggleConfirmPasswordVisibility()">
                            <i class="fas fa-eye"></i>
                        </span>
                    </div>
                    <div class="error-message" id="confirm-password-error"></div>
                </div>
                
                <div class="form-group">
    <label class="form-label" for="avatar">上传头像</label>
    <div class="avatar-preview" id="avatar-preview">
        <i class="fas fa-camera"></i>
        <div class="upload-text">点击上传或拖放图片</div>
        <img id="avatar-img" class="avatar-img" src="" alt="头像预览">
    </div>
    <input type="file" id="avatar" name="avatar" accept="image/*" style="display: none;" required>
    <div class="upload-btn" onclick="document.getElementById('avatar').click()">选择文件</div>
</div>
                
                <div class="form-group">
                    <label class="form-label">验证码</label>
                    <div class="captcha-container">
                        <div class="captcha-box" id="captcha-box" onclick="refreshCaptcha()">
                            <?php echo $captcha_a . ' × ' . $captcha_b . ' ='; ?>
                        </div>
                        <input type="text" id="captcha" name="captcha_response" 
                               class="form-control captcha-input" placeholder="请输入计算结果" required>
                    </div>
                    <div class="error-message" id="captcha-error"></div>
                </div>
                
                <button type="submit" class="register-btn">立即注册</button>
            </form>
            
            <div class="links-container">
                <a href="login.php" class="footer-link">已有账号？登录</a>
            </div>
        </div>
    </div>
    
    <!-- 加载弹窗 -->
    <div id="loading-modal">
        <div class="spinner"></div>
        <div class="loading-text">正在为您完成注册...</div>
    </div>

    <script>
        // 密码可见性切换
        function togglePasswordVisibility() {
            const passwordField = document.getElementById('password');
            const icon = passwordField.nextElementSibling.querySelector('i');
            const type = passwordField.type === 'password' ? 'text' : 'password';
            
            passwordField.type = type;
            icon.classList.toggle('fa-eye');
            icon.classList.toggle('fa-eye-slash');
        }
        
        function toggleConfirmPasswordVisibility() {
            const confirmField = document.getElementById('confirm_password');
            const icon = confirmField.nextElementSibling.querySelector('i');
            const type = confirmField.type === 'password' ? 'text' : 'password';
            
            confirmField.type = type;
            icon.classList.toggle('fa-eye');
            icon.classList.toggle('fa-eye-slash');
        }
        
        // 密码强度实时检测
        document.getElementById('password').addEventListener('input', function() {
            const password = this.value;
            const strengthLevel = document.getElementById('strength-level');
            const passwordError = document.getElementById('password-error');
            const length = password.length;
            
            let strength = 0;
            let color = '#e53e3e'; // 红色
            let message = '';
            
            if (length === 0) {
                strengthLevel.style.width = '0%';
                passwordError.style.display = 'none';
                return;
            }
            
            // 密码强度计算（基于长度和复杂度）
            if (length >= 6) strength = 33;
            if (length >= 8) strength = 66;
            if (length >= 10 && /[0-9]/.test(password) && /[a-zA-Z]/.test(password)) strength = 100;
            else if (length >= 10) strength = 80;
            
            // 设置颜色和提示消息
            if (length < 6) {
                color = '#e53e3e';
                message = '密码长度至少需要6位';
            } else if (strength < 50) {
                color = '#f39c12'; // 橙色
                message = '密码强度较弱';
            } else if (strength < 80) {
                color = '#f1c40f'; // 黄色
                message = '密码强度中等';
            } else {
                color = '#2ecc71'; // 绿色
                message = '密码强度强';
            }
            
            strengthLevel.style.width = strength + '%';
            strengthLevel.style.background = color;
            
            if (length < 6) {
                passwordError.textContent = message;
                passwordError.style.display = 'block';
            } else {
                passwordError.style.display = 'none';
            }
        });
        
        // 头像预览功能
        const avatarPreview = document.getElementById('avatar-preview');
        const avatarInput = document.getElementById('avatar');
        const avatarImg = document.getElementById('avatar-img');
        
        avatarPreview.addEventListener('click', () => {
            avatarInput.click();
        });
        
        avatarInput.addEventListener('change', function() {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    avatarImg.src = e.target.result;
                    avatarImg.style.display = 'block';
                    avatarPreview.querySelector('i').style.display = 'none';
                    avatarPreview.querySelector('.upload-text').style.display = 'none';
                    
                    // 添加动画效果
                    avatarImg.style.animation = 'fadeIn 0.5s forwards';
                }
                
                reader.readAsDataURL(this.files[0]);
            }
        });
        
        // 刷新验证码
        function refreshCaptcha() {
            // 创建简单的AJAX请求获取新验证码
            fetch('refresh_captcha.php')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('captcha-box').textContent = data.question;
                    document.getElementById('captcha-box').style.animation = 'none';
                    setTimeout(() => {
                        document.getElementById('captcha-box').style.animation = 'fadeIn 0.5s';
                    }, 10);
                })
                .catch(error => {
                    console.error('刷新验证码失败:', error);
                    showNotification('验证码刷新失败，请重试', 'error');
                });
        }
        
        // 显示通知
        function showNotification(message, type = 'error') {
            const container = document.getElementById('notification-container');
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            notification.innerHTML = `
                <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
                <span>${message}</span>
            `;
            
            container.appendChild(notification);
            
            // 触发动画
            setTimeout(() => {
                notification.classList.add('show');
            }, 10);
            
            // 自动移除
            setTimeout(() => {
                notification.classList.remove('show');
                setTimeout(() => {
                    container.removeChild(notification);
                }, 500);
            }, 3000);
        }
        
        // 表单验证
        document.getElementById('registration-form').addEventListener('submit', function(e) {
            e.preventDefault();
            let isValid = true;
            
            // 用户名验证
            const username = document.getElementById('username').value.trim();
            const usernameError = document.getElementById('username-error');
            if (username.length < 2) {
                usernameError.textContent = '用户名至少需要2个字符';
                usernameError.style.display = 'block';
                isValid = false;
            } else {
                usernameError.style.display = 'none';
            }
            
            // 密码验证
            const password = document.getElementById('password').value;
            const passwordError = document.getElementById('password-error');
            if (password.length < 6) {
                passwordError.textContent = '密码长度至少需要6位';
                passwordError.style.display = 'block';
                isValid = false;
            } else {
                passwordError.style.display = 'none';
            }
            
            // 确认密码验证
            const confirmPassword = document.getElementById('confirm_password').value;
            const confirmPasswordError = document.getElementById('confirm-password-error');
            if (password !== confirmPassword) {
                confirmPasswordError.textContent = '两次输入的密码不一致';
                confirmPasswordError.style.display = 'block';
                isValid = false;
            } else {
                confirmPasswordError.style.display = 'none';
            }
            
            // 验证码验证
            const captcha = document.getElementById('captcha').value;
            const captchaError = document.getElementById('captcha-error');
            if (!captcha) {
                captchaError.textContent = '请输入验证码';
                captchaError.style.display = 'block';
                isValid = false;
            } else {
                captchaError.style.display = 'none';
            }
            
            // 头像验证
            const avatar = document.getElementById('avatar').files[0];
            if (!avatar) {
                showNotification('请上传头像', 'error');
                isValid = false;
            }
            
            // 表单提交
            if (isValid) {
                // 显示加载弹窗
                document.getElementById('loading-modal').classList.add('active');
                
                // 实际提交表单
                setTimeout(() => {
                    this.submit();
                }, 1000);
            } else {
                showNotification('请完善表单信息', 'error');
            }
        });
        
        // 页面加载时检查是否有错误需要显示
        document.addEventListener('DOMContentLoaded', function() {
            <?php if (!empty($errors)): ?>
                showNotification(`<?php echo implode("\\n", $errors); ?>`, 'error');
            <?php endif; ?>
            
            <?php if ($show_loading): ?>
                // 显示加载动画
                document.getElementById('loading-modal').classList.add('active');
                
                // 模拟注册过程，2秒后跳转到登录页
                setTimeout(() => {
                    window.location.href = 'login.php';
                }, 2000);
            <?php endif; ?>
        });

// 点击上传
avatarPreview.addEventListener('click', () => {
    avatarInput.click();
});

// 文件选择
avatarInput.addEventListener('change', function() {
    handleAvatarFile(this.files[0]);
});

// 拖放功能
avatarPreview.addEventListener('dragover', (e) => {
    e.preventDefault();
    avatarPreview.style.borderColor = '#3498db';
    avatarPreview.style.backgroundColor = '#e0f2fe';
});

avatarPreview.addEventListener('dragleave', () => {
    avatarPreview.style.borderColor = '#cbd5e0';
    avatarPreview.style.backgroundColor = '#f1f5f9';
});

avatarPreview.addEventListener('drop', (e) => {
    e.preventDefault();
    avatarPreview.style.borderColor = '#cbd5e0';
    avatarPreview.style.backgroundColor = '#f1f5f9';
    
    if (e.dataTransfer.files.length) {
        handleAvatarFile(e.dataTransfer.files[0]);
    }
});

// 处理头像文件
function handleAvatarFile(file) {
    if (file && file.type.match('image.*')) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            avatarImg.src = e.target.result;
            avatarImg.style.display = 'block';
            avatarPreview.querySelector('i').style.display = 'none';
            avatarPreview.querySelector('.upload-text').style.display = 'none';
        }
        
        reader.readAsDataURL(file);
    } else {
        showNotification('请选择有效的图片文件', 'error');
    }
}
    </script>
</body>
</html>